<template>
	<div class="kaoguanguanli">
    <top></top>
    <div class="flexcc">
      <img src="../../../static/img2/banner2.png">
    </div>
    <div class="ww" style="padding: 20px 0 50px;">

      <div style="margin-bottom: 30px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>报名查询</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div style="background: #fff; width: 100%; border-radius: 10px; padding: 30px; min-height: calc(100vh - 460px);">
        <div class="flexc mb20">
            <div class="flexc ">
               <!-- <div style="width: 180px; text-align: right; margin-right: 30px;">请输入报名人姓名：</div> -->
               <el-input v-model="search.name" style="width: 300px; " placeholder="请输入报名人姓名"></el-input>
            </div>
            <div class="flexc ">
               <!-- <div style="width: 180px; text-align: right; margin-right: 30px;">请输入报名手机号：</div> -->
               <el-input v-model="search.phone" style="width: 300px; margin-left: 20px;" placeholder="请输入报名手机号"></el-input>
            </div>
            <div class="flexc ">
              <el-button type="primary" @click="getlist()" style="margin-left: 20px;">查询</el-button>
            </div>
        </div>

        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="competition_name" label="赛事名称"></el-table-column>
            <el-table-column prop="create_time" label="报名时间"></el-table-column>
            <el-table-column prop="competition_status_name" label="赛事状态"></el-table-column>
            <el-table-column prop="type_name" label="报名组别"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="pay_status_name" label="缴费状态"></el-table-column>
<!--            <el-table-column prop="entry_time" label="参赛时间"></el-table-column>
            <el-table-column prop="play_time" label="赛事用时"></el-table-column>
            <el-table-column prop="score" label="分数"></el-table-column>
            <el-table-column prop="ranking" label="名次"></el-table-column> -->
            <el-table-column label="操作" width="300px">
              <template slot-scope="scope">
                <el-button size="mini" type="text" @click="log2show(scope.row)" v-if="scope.row.pay_status == 0">缴费</el-button>
                <el-button size="mini" type="text" @click="$router.push('/saishijieshao/detail?id=' + scope.row.competition_id)" >赛事详情</el-button>
                <el-button size="mini" type="text" @click.stop="chakanchengji(scope.row)">查看成绩</el-button>
                <el-button size="mini" type="text" @click="tuifei(scope.row)" v-if="scope.row.pay_status == 10">申请退费</el-button>
                <el-button size="mini" type="text" @click="shengcheng(scope.row)">生成证书</el-button>
              </template>
            </el-table-column>
        </el-table>

        <el-pagination style="text-align: right; padding: 20px;" background layout="prev,pager,next,total" :current-page="search.page" @current-change="fanye" :page-size="search.page_size" :total="total"></el-pagination>

      </div>
    </div>


    <el-dialog title="付款" :visible.sync="log" width="340px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div class="flexbc">
        <div style="text-align: center; font-size: 16px; " >
          <div style="margin-bottom: 30px; font-weight: bold;" v-if="pay_type == 0">微信支付</div>
          <div style="margin-bottom: 30px; font-weight: bold;" v-if="pay_type == 2">支付宝支付</div>
          <div class="qrcode" ref="qrCodeUrl" style="margin: 0 auto; max-width: 100%;"></div>
        </div>
      </div>
      <div style="margin-top: 50px; text-align: center; font-size: 16px; font-weight: bold;">付款后关闭即可，报名查询请进入”查看报名“页面，或者公众号”ADIC“。</div>
    </el-dialog>


    <el-dialog title="付款方式" :visible.sync="log2" width="340px" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-select v-model="pay_type" style="width: 300px;" placeholder="请选择支付方式">
          <el-option label="微信" :value="0" ></el-option>
          <el-option label="支付宝" :value="2" ></el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" round @click="log2 = false">关闭</el-button>
        <el-button type="primary" round @click="handleEdit(item)">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="证书" :visible.sync="log3" width="750px" :close-on-click-modal="false" :close-on-press-escape="false">
      <div id="myElement" ref="myElement" style="position: relative;">
        <img src="../../../static/img/zhengshu.png" style="width: 750px;">
        <div style="position: absolute; width: 100%; text-align: center; top: 170px; font-size: 16px; font-weight: bold;">{{chengjiall.id_name}}</div>
        <div style="position: absolute; width: 100%; text-align: center; top: 300px; font-size: 16px; font-weight: bold;">第{{chengjiall.ranking}}名 </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button round @click="log3 = false">关闭</el-button>
        <el-button type="primary" round @click="shengcheng2(item)">下载证书</el-button>
      </div>
    </el-dialog>


    <div @click="shengcheng" style="color: #197cff; font-size: 14px; padding: 0.2rem; text-align: center; font-weight: bold;">生成证书</div>
    <img :src="imgurl">

	</div>
</template>

<script>
  import html2canvas from 'html2canvas';
  import QRCode from 'qrcodejs2'
  import top from '../top.vue'
	export default {
		name: 'kaoguanguanli',
    components:{
      top
    },
		data() {
			return {
        search:{
          page:1,
          page_size:20,
          name:this.$route.query.name,
          phone:this.$route.query.phone,
        },
        total:0,
        tableData:[],
        log:false,
        log2:false,
        pay_type:0,
        item:"",
        erweima:"",

        chengjiall:[],
        log3:false
      }
		},
		created() {
      if(this.$route.query.name && this.$route.query.phone){
        this.getlist()
      }

		},
		mounted() {

		},
    beforeDestroy() {
      clearInterval(this.xunhuan)
    },
		methods: {
      chakanchengji:function(){
        this.$message.error('很抱歉，目前比赛成绩尚未公布，请您耐心等待。');
        // $router.push('/saishijieshao/chengji?id=' + scope.row.id)
      },
      dataURLtoBlob(dataurl) {
          var arr = dataurl.split(","),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n)
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
          }
          return new Blob([u8arr], { type: mime })
      },

      shengcheng2:function(){
        const element = this.$refs.myElement;
        html2canvas(element,{
          scale: 2, // 增加缩放比例
          dpi: 300, // 提高DPI
          useCORS: true // 允许跨域图片处理
        }).then(canvas => {
          const dataUrl = canvas.toDataURL();

          // let file = this.dataURLtoFile(dataUrl,'证书'+ parseInt(Math.random()*100000) + '.png')
          // this.uploadok(file)

          let file2 = this.dataURLtoBlob(dataUrl)
          var myUrl = URL.createObjectURL(file2)
          var a = document.createElement("a")
          a.setAttribute("href", myUrl)
          a.setAttribute("download", 'zhengshu.png')
          a.setAttribute("target", "_blank")
          let clickEvent = document.createEvent("MouseEvents")
          clickEvent.initEvent("click", true, true)
          a.dispatchEvent(clickEvent)

        });
      },

      // uploadok:function(file){

      //   let data = new FormData()
      //   data.append('file',file)
      //   axios.post(this.IP_URL+'/index/upload',data).then((response)=>{
      //     if(response.data.msg.code == 0){
      //       this.imgurl = response.data.data.url
      //       location.href = this.imgurl
      //     } else {
      //       this.$message.error(response.data.reason);
      //     }
      //   })

      // },

      // dataURLtoFile:function(dataurl, filename) {
      // 	let arr = dataurl.split(',');
      // 	let mime = arr[0].match(/:(.*?);/)[1];
      // 	let bstr = atob(arr[1]);
      // 	let n = bstr.length;
      // 	let u8arr = new Uint8Array(n);
      // 	while (n--) {
      // 		u8arr[n] = bstr.charCodeAt(n);
      // 	}
      // 	return new File([u8arr], filename, {
      // 		type: mime
      // 	});
      // },

      shengcheng:function(item){

        this.$message.error('很抱歉，目前比赛成绩尚未公布，请您耐心等待。');
        // axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:{
        //   competition_id:item.competition_id,
        //   enrolment_id:item.id
        // }}).then((response)=>{
        // 	if (response.data.msg.code == 0) {
        //     this.chengjiall = response.data.data[0]
        //     this.log3 = true
        // 	} else {
        // 		this.$message.error(response.data.msg.info);
        // 	}
        // })
      },

      tuifei:function(item){
        this.$confirm('确定要申请退费吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post(this.IP_URL+'/api/enrolment/referrefund',{
            id:item.id,
            phone:item.phone,
            name:item.name
          }).then((response)=>{
          	if (response.data.msg.code == 0) {
              this.$message.success('已申请，请等待后台审核');
              this.getlist()
          	} else {
          		this.$message.error(response.data.msg.info);
          	}
          })
        })
      },
      creatQrCode() {
        this.$refs.qrCodeUrl.innerHTML = '';
        var qrcode = new QRCode(this.$refs.qrCodeUrl, {
            text: this.erweima,
            width: 300,
            height: 300,
            colorDark: '#000000',
            colorLight: '#ffffff',
            correctLevel: QRCode.CorrectLevel.H
        })
      },
      log2show:function(item){
        this.log2 = true
        this.item = JSON.parse(JSON.stringify(item))
      },
      xunhuans:function(){
        this.xunhuan = setInterval(()=>{
          axios.get(this.IP_URL+'/api/enrolment/paynotify?id=' + this.pay_id).then((response)=>{
          	if (response.data.msg.code == 0) {
          		clearInterval(this.xunhuan)
              this.log = false
              this.getlist()
          	} else {
          		// this.$message.error(response.data.msg.info);
          	}
          })
        },1000)
      },
      handleEdit:function(item){
        axios.post(this.IP_URL+'/api/wechat/repay',{
          enrolment_id:item.id,
          pay_type:this.pay_type,
          openid:""
        }).then((response)=>{
        	if (response.data.msg.code == 0) {
            if(this.pay_type == 0){
              this.erweima = response.data.data.code_url
            }else{
              this.erweima = response.data.data.qr_code
            }
            this.pay_id = response.data.data.pay_id

            this.xunhuans()

            this.log2 = false

            //成功后生成二维码
            this.log = true
            this.$nextTick(()=>{
              this.creatQrCode()
            })
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },

      getlist:function(){
        axios.get(this.IP_URL+'/api/enrolment/find',{params:this.search}).then((response)=>{
        	if (response.data.msg.code == 0) {
        		this.tableData = response.data.data.data
            this.total = response.data.data.total
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      },
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },
    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{ width: 300px;}
</style>
